<script setup>
  import { ref, onBeforeMount } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { copy } from '@/utils'
  import { HeartFilled, HeartOutlined, ExclamationCircleFilled, QrcodeOutlined }from '@ant-design/icons-vue'
  import Swiper from "@/views/home/components/Swiper.vue";
  import PageHeader from "@/components/PageHeader.vue";
  import GoodsItem from "@/components/GoodsItem.vue";
  import {collectApi, shopDetailApi} from "@/api/index.js";
  import {message} from "ant-design-vue";
  const router = useRouter();
  const route = useRoute();
  const qrcodeRef = ref()
  // 店铺详情
  const shopInfo = ref({
    id: '',
    logo: '',
    name: '',
    mobile: '',
    address: '', // 地址
    contacts: '', // 联系人
    label_arr: [], // 标签
    goods_lists: [],
    is_collect: 0,
    goods_sales: '', // 销量
    goods_num: '', // 商品数量
    web_url: '', // 网店地址
  })
  const collectShop = () => {
    collectApi({type: 1, id: shopInfo.value.id}).then(res => {
      message.success('操作成功')
      let st = shopInfo.value.is_collect
      shopInfo.value.is_collect = st === 0 ? 1 : 0
    })
  }
  // const goEvaList = () => {
  //   router.push({ name: 'evaList' })
  // }
  // 下载二维码
  const download = async () =>{
    const url = await qrcodeRef.value.toDataURL();
    const a = document.createElement('a');
    a.download =  shopInfo.value.name + '.png';
    a.href = url;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  }
  // 获取店铺详情
  const getShopDetails = (shop_id) => {
    shopDetailApi({ shop_id }).then((res) => {
      shopInfo.value = res
      shopInfo.value.web_url = shopInfo.value.web_url + '/shop?id=' + shop_id
    })
  }
  onBeforeMount(() => {
    const { id } = route.query
    getShopDetails(id)
  })
</script>

<template>
  <div class="shop-page">
    <PageHeader>
      <component @click="collectShop" :is="shopInfo.is_collect === 0? HeartOutlined : HeartFilled" style="font-size: 22px"/>
      <a-popover>
        <template #content>
          <a-qrcode
              ref="qrcodeRef"
              :value="shopInfo.web_url"
              bg-color="#fff"
          />
          <a-button @click="download" style="width: 100%"> 下载 </a-button>
        </template>
        <QrcodeOutlined style="font-size: 22px"/>
      </a-popover>
      <a-tooltip placement="bottom">
        <template #title>
          <span> 投诉商家 </span>
        </template>
        <ExclamationCircleFilled style="font-size: 22px"/>
      </a-tooltip>
    </PageHeader>
    <div class="shop-info">
      <div class="shop-detail">
        <img :src="shopInfo.logo" alt="" class="shop-logo"/>
        <div class="sd">
          <div class="s-name"> {{ shopInfo.name }} </div>
          <div class="sale-eva">
            <div class="rate"> 商品数量：{{ shopInfo.goods_num }} </div>
            <div class="sale"> 销量：{{ shopInfo.goods_sales }} </div>
          </div>
          <div class="link"> 店铺地址: {{ shopInfo.address }} </div>
          <div class="link"> 网店地址: <span @click="copy(shopInfo.web_url)"> {{ shopInfo.web_url }} </span> </div>
<!--          <div class="shop-intro"> 店铺简介：啊实打实卡迪那上课了到哪刷卡阿萨德看见那数据库里的那仨阿萨德克拉斯没拿到开始啦 </div>-->
        </div>
      </div>
<!--      <Swiper/>-->
    </div>
    <div class="goods-title"> 店铺商品 </div>
    <div class="goods-list">
      <GoodsItem :info="item" :is-collect="false" v-for="item in shopInfo.goods_lists" :key="item.id"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .shop-page {
    padding: 50px 0;
    .anticon {
      cursor: pointer;
    }
    .shop-info {
      margin-bottom: 20px;
      .shop-detail {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
        .shop-logo {
          width: 100px;
          height: 100px;
          border-radius: 10px;
        }
        .sd {
          display: flex;
          flex-direction: column;
          gap: 5px;
          .s-name {
            font-size: 20px;
            font-weight: bold;
          }
          .sale-eva {
            display: flex;
            gap: 20px;
          }
          .shop-intro {
            color: #999;
          }
          .link {
            span {
              color: #5284fd;
              cursor: pointer;
            }
          }
        }
      }
    }
    .goods-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .goods-list {
      flex: 1;
    }
  }
</style>